import React from 'react'
import {useState,useEffect} from 'react'
import { useSelector, useDispatch } from 'react-redux'
import * as listType  from '@/store/actionsType/yxk/yxk-audit-type'
import AntDate from '@/components/yxk/AntDate'
import AntSelect from '@/components/yxk/AntSelect'
import RechargeSearch from '@/components/yxk/RechargeSearch'
import '@/assets/scss/yxk/rechargebox.scss'
import rechargeAllData from "../../http/yxk/Recharge";
import {Table,Button} from "antd";
export default function Operation(props) {
  const rechargeStyle = {
    margin:"0 20px 0 0"
  };

  console.log(props)

  const [placeholderOne, setplaceholderOne] = useState('搜索提现单号')
  const [placeholderTwo, setplaceholderTwo] = useState('搜索用户手机')
  const [placeholderThree, setplaceholderThree] = useState('搜索账户名')
  const [placeholderFour, setplaceholderFour] = useState('搜索银行账号')

  const dispatch = useDispatch()
  // const [data,setData] = useState([])

  useEffect(() => {
    rechargeAllData()
      .then(res => {
        console.log(res[2].data.data.data);
        dispatch({
          type:listType.AUDITDATA,
          data:res[2].data.data.data
        })
        // setData(res[2].data.data.data)
      })
      .catch ( err => {
        console.log(err);
      })
  },[])

  //通过useSelector去获取state里面的值
  const data = useSelector((state) => state.audit.data)


  const columns = [
    {
      title: '提现单号',
      dataIndex: 'cashOdd',
      // render(text) {
      //   return <a href="#">{text}</a>;
      // }
    },
    {
      title: '用户手机',
      dataIndex: 'phone'
    },
    {
      title: '真实姓名',
      dataIndex: 'name'
    },
    {
      title: '用户类型',
      dataIndex: 'type'
    },
    {
      title: '提现金额',
      dataIndex: 'cashAmount'
    },
    {
      title: '银行账号',
      dataIndex: 'bankAccount'
    },
    {
      title: '银行名称',
      dataIndex: 'bankName'
    },
    {
      title: '提交时间',
      dataIndex: 'bankNumber'
    },
    {
      title: '状态',
      dataIndex: 'status'
    },
    {
      title:'操作',
      dataIndex:'operation',
      render: (text,record)=> (
        <Button size='small' type='text' onClick={() => shenghe(record)}>审核</Button>
      )
    }
  ];

  const pagination = {
    total: data.length,
    showSizeChanger: true,
    onShowSizeChange(current, pageSize) {
      console.log('Current: ', current, '; PageSize: ', pageSize);
    },
    onChange(current) {
      console.log('Current: ', current);
    }
  };

  const shenghe=(data)=>{
    props.history.push('/index/zijin/auditParticulars')
    console.log(data)
    dispatch({
      type:listType.SHENGHE,
      data:data
    })
  }


  return (
    <div className="recharge-box">
      <div className="recharge-ant">
            <span style={ rechargeStyle}>
              <RechargeSearch placeholder={placeholderOne}></RechargeSearch>
            </span>
        <span style={ rechargeStyle}>
              <RechargeSearch  placeholder={placeholderTwo}></RechargeSearch>
            </span>
        <span style={ rechargeStyle}>
              <RechargeSearch  placeholder={placeholderThree}></RechargeSearch>
            </span>
        <span style={ rechargeStyle}>
              <RechargeSearch  placeholder={placeholderFour}></RechargeSearch>
            </span>
        <span style={ rechargeStyle}>
              <AntSelect></AntSelect>
            </span>
        <span style={ rechargeStyle}>
              <AntDate></AntDate>
            </span>

      </div>
      <div className="recharge-table">
        <Table columns={columns} dataSource={data} pagination={pagination} />
      </div>
    </div>
  )
}
